import { Draw } from "../Draw/Draw";
import { thumbClick } from "../Event/handle/global/thumb-click";
import { imageBoxDragEnd } from "../Event/handle/global/imageBox-dragend";
import { imageBoxDragEnter } from "../Event/handle/global/imageBox-dragenter";
import { imageBoxDragStart } from "../Event/handle/global/imageBox-dragstart";

/**
 * 创建中间容器类 (konva-root-container)
 *  放置 缩略图容器  (konva-root-container-thumb)
 *  放置 konva 容器  (konva-root-container-konvabox)
 */

export class MiddleContainer {
  private draw: Draw;

  constructor(draw: Draw) {
    this.draw = draw;

    const root = this.draw.getRootBox();
    const containerBox = document.createElement("div");
    containerBox.className = "konva-root-container";
    root.appendChild(containerBox);

    // 创建 左侧幻灯片缩略图
    const thumb = document.createElement("div");
    thumb.className = "konva-root-container-thumb konva-root-overflow";
    containerBox.appendChild(thumb);

    // 这里需要预留一个 box 放置 konva stage
    const konvaBox = document.createElement("div");
    konvaBox.className = "konva-root-container-konvabox";

    // 需要创建一个 zoom 容器 用于实现缩放平移功能
    const zoomBox = document.createElement("div");
    zoomBox.className = "konva-root-container-zoom";
    zoomBox.appendChild(konvaBox);
    containerBox.appendChild(zoomBox);

    // 监听幻灯片缩略图事件，重新渲染列表
    const eventbus = this.draw.getEventBus();
    eventbus.on("thumbChanged", this.thumbChangeHandle.bind(this));
  }

  /** 幻灯片缩略图是根据 konva.toDataUrl 动态创建的 */
  private thumbChangeHandle(thumbList: string[]) {
    const SELECTOR = ".konva-root-container-thumb";
    const thumbBox = this.draw.getRootBox().querySelector(SELECTOR)!;
    thumbBox.innerHTML = "";

    const draw = this.draw;

    // 循环生成HTML，并绑定事件
    thumbList.forEach((source, index) => {
      const thumbItem = document.createElement("div");
      thumbItem.dataset.index = index.toString(); // 标记当前缩略图下标

      // eslint-disable-next-line
      // @ts-ignore
      const order = String(index + 1).padStart(2, "0");
      const text = document.createElement("span");
      text.innerText = order;

      const imageBox = document.createElement("div");
      imageBox.className = "imageBox";
      imageBox.setAttribute("draggable", "true");

      imageBox.innerHTML = `<img src="${source}" />`;

      const iconBox = document.createElement("div");
      const playIcon = document.createElement("i");
      playIcon.className = "iconfont icon-uni-tingzhi";
      const deleteIcon = document.createElement("i");
      deleteIcon.className = "iconfont icon-uni-shanchu";

      iconBox.appendChild(playIcon);
      iconBox.appendChild(deleteIcon);
      imageBox.appendChild(iconBox);

      thumbItem.appendChild(text);
      thumbItem.appendChild(imageBox);
      thumbBox.appendChild(thumbItem);

      // 获取当前幻灯片 index 添加 active 样式
      const layerIndex = this.draw.getLayerManager().getCurrentIndex();
      if (index === layerIndex) thumbItem.classList.add("active");

      // 监听预览、删除事件
      playIcon.addEventListener("click", (e) => previewHandle(e, draw, index));
      deleteIcon.addEventListener("click", (e) => deleteHandle(e, draw, index));

      /** 单击切换至该幻灯片 */
      thumbItem.addEventListener("click", (e) => thumbClick(e, draw));
      /** 拖拽开始 - 添加拖拽样式 */
      imageBox.addEventListener("dragstart", imageBoxDragStart);
      /** 拖拽结束 - 更新视图 */
      imageBox.addEventListener("dragend", (e) => imageBoxDragEnd(e, draw));
      /** 拖拽进入 - 实现排序 */
      imageBox.addEventListener("dragenter", (e) => imageBoxDragEnter(e, draw));
      /** 鼠标进入 */
      imageBox.addEventListener("mouseenter", () => mouseEnterHandle(draw));
      /** 鼠标移出 */
      imageBox.addEventListener("mouseleave", () => mouseLeaveHandle(draw));
    });
  }
}

// 预览按钮
function previewHandle(e: Event, draw: Draw, index: number) {
  e.stopPropagation();
  const command = draw.getCommand();
  command.executePreviewSlide(index);
}

// 删除按钮
function deleteHandle(e: Event, draw: Draw, index: number) {
  e.stopPropagation();
  const command = draw.getCommand();
  command.executeDeleteSlide(index + 1); // 实现自然顺序
}

// 鼠标进入 则需要添加 copySlide 标记
function mouseEnterHandle(draw: Draw) {
  const stage = draw.getStage();
  stage.setAttrs({ copySlideFlag: true });
}

// 鼠标进出 则需要删除 copySlide 标记
function mouseLeaveHandle(draw: Draw) {
  const stage = draw.getStage();
  stage.setAttrs({ copySlideFlag: null });
}
